<template>
  <div class="container">
    <iframe
      id="mapPage"
      frameborder="0"
      src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp"
    ></iframe>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {}
  },
  mounted() {
    window.addEventListener("message", (event) => {
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      const loc = event.data;
      // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
      if (loc && loc.module === "locationPicker") {
        console.log("定位信息", loc);
        this.$emit("location", loc)
      }
      // 返回的位置信息格式，父页面使用@location接收定位数据
      // {
      //   module:'locationPicker',
      //   latlng: {
      //       lat: 39.998766,
      //       lng: 116.273938
      //   },
      //   poiaddress: "北京市海淀区新建宫门路19号",
      //   poiname: "颐和园",
      //   cityname: "北京市"
      // }
    }, false);
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  #mapPage {
    width: 100%;
    height: 100%;
  }
}
</style>
